<template>
  <div class="main-head-container">
    <el-row :gutter="10" type="flex" align="middle" justify="space-between">
      <!-- 隐藏显示菜单按钮 -->
      <el-col :span="2">
        <el-button
          type="primary"
          @click="changeAside"
          :icon="iconType"
          size="mini"
        ></el-button>
      </el-col>

      <!-- 面包屑 -->
      <el-col :span="14">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="item in breadcrumbList"
            :key="item.name"
            :to="{ path: item.path }"
            >{{ item.title }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>

      <!-- 退出按钮 -->
      <el-col :span="8">
        <el-row type="flex" align="middle">
          <el-col :push="14" :span="6">{{ user.username }}</el-col>
          <el-col :push="14" :span="4">
            <el-button type="danger" size="mini" @click="loginout">
              退出
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { removeCookies } from "@/utils";
export default {
  data() {
    return {
      showIcon: "el-icon-s-unfold",
      hiddenIcon: "el-icon-s-fold",
    };
  },
  computed: {
    iconType() {
      return this.isShow ? this.hiddenIcon : this.showIcon;
    },
    breadcrumbList() {
      return this.$route.matched.map((item) => {
        return {
          name: item.name,
          path: item.path,
          title: item.meta.title,
        };
      });
    },
    ...mapState({
      isShow: "isShowAside",
      user: "user",
    }),
  },
  methods: {
    changeAside() {
      this.$store.dispatch("asyncChangeShowAside");
    },
    loginout() {
      removeCookies();
      this.$router.push({
        name: "Login",
      });
    },
  },
};
</script>

<style scoped lang="less">
.main-head-container {
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
</style>